<template>
  <div ref="chart" style="height: 300px;"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import axios from '@/api/axios'

const chart = ref(null)

onMounted(async () => {
  const res = await axios.get('/caregiver/accident/chart')
  const data = res.data

  const instance = echarts.init(chart.value)
  instance.setOption({
    title: { text: '近30天事故记录' },
    xAxis: { type: 'category', data: data.dates },
    yAxis: { type: 'value' },
    series: [{
      data: data.counts,
      type: 'bar',
      itemStyle: { color: '#ee6666' }
    }]
  })
})
</script>
